<template> 
<div class="flex justify-center items-center text-3xl font-bold">{{ appConfig.title }}--首页</div>
<img src="/img/nuxt.png" alt="">
<img src="~/assets/img/image.png"/>
<div class="box">外包css</div>
<p>main.css 颜色：蓝色</p>
<div>font中文字体样式</div>
<div class="fontsize">font中文字体样式</div>
<nuxt-link to="/us">关于我们</nuxt-link>
<nuxt-link to="/seo">SEO</nuxt-link>
</template>
<script setup lang="ts">
import '~/assets/css/style.css'
const appConfig = useAppConfig()
console.log('xx',appConfig)


// 在组件、composables 或 plugins 中
const config = useRuntimeConfig()
console.log('config',config)
const apiUrl = config.public.API_URL
console.log('apiUrl',apiUrl)

// 使用示例
async function fetchData() {
  const data = await $fetch(`${apiUrl}/users`)
  return data
}

const datalist = await useAsyncData(() => Promise.resolve({ message: 'Hello, Nuxt!' }))
console.log('data',datalist)
async function refreshData () {
  await datalist.refresh({ dedupe: 'cancel' })
  console.log('xx',datalist.data.value)//{message: 'Hello, Nuxt!'}
}
refreshData()
</script>
<style>
/* @import url('~/assets/css/style.css'); */
@import "tailwindcss";
</style>
